<template>
<div class="abc">
  <div class="abd">
    <el-form :model="user" label-width="80px">
      <div class="login-main">
        <el-form-item style="margin-left:16%;">
           <h1>机考系统登录端</h1>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="user.username"type="text"  clearable placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item style="padding: 1% 25%;">
          <el-button type="primary" @click="login()" round>登录</el-button>
        </el-form-item>
        </div>
      </el-form>
  </div>
</div>
</template>

<script>
 import {mapMutations} from 'vuex'
 export default {
   data() {
     return {
       user: {
         username:'',
         password:''
       }
     }
   },
  methods:{
    ...mapMutations(['setName','setIsLogined','setUser']),
    login(){
      this.$ajax.post('login',this.user).then(res=>{
        var result=res.data;
        if(result.success){
          var name=result.data.name;
          var token=result.data.token;
             var roles=result.data.roles;
          window.sessionStorage.setItem("name",name);
          window.sessionStorage.setItem("token",token);
          window.sessionStorage.setItem("roles",roles);
          // this.setName(name);
          // this.setIsLogined(true);
          // this.setUser(this.user.username);
          this.$router.replace('/new');
        }else{
          this.user.username='';
          this.user.password='';
          this.$message.error('用户名或密码错误');
        }
      }).catch(error=>{
        this.$message.error('网络连接失败');
      })
    }
  }

   }
</script>

<style >
  div.abc{
     background-image: url(../img/bg2.jpg);
     position:fixed;
     top: 0;
     left: 0;
     width:100%;
     height:100%;
     min-width: 1000px;
     z-index:-10;
     zoom: 1;
     background-color: #fff;
     background-repeat: no-repeat;
     background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
     background-position: center 0;
  }
  .login-main{
      padding: 25px 15px 15px 15px;
      background-color: rgba(255,255,255,0.8);
      border-radius: 5px;
    }
  div.abd{
     color: #000000;
     position: absolute;
     top:25%;
     right: 35%;
     width: 30%;
     height: 35%;
    }
 .el-input{
     width: 80%;
 }
</style>
